<template>
  <!-- U9入库表单弹窗 -->
  <el-dialog
          v-model="visibleDialog"
          :title="props.title"
          width="70%"
          draggable
          @close="closeDialog"
  >
  <el-descriptions
      class="margin-top"
      title=""
      :column="2"
      size="large"
      v-show="props.isReadonly"
      border
    >
    <el-descriptions-item>
        <template #label>
          <div class="cell-item">单据编号</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.receiptCode}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">物料id</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.materialId}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">物料编号</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.materialCode}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">物料名称</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.materialName}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">单据状态</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.receiptStatus}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">入库批号</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.batchNumber}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">存储地点id</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.storageLocationId}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">存储地点编号</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.storageLocationCode}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">存储地点名称</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.storageLocationName}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">入库日期</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.businessDate}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">单据创建人</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.receiptUserName}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">业务类型</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.businessType}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">实到数量</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.actualQuantity}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">供应商id</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.supplierId}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">供应商编号</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.supplierCode}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">供应商名称</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.supplierName}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">质检状态</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.checkStatus}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">删除标识</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{formData.deleted}}
        </div>
      </el-descriptions-item>
  
    </el-descriptions>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="160" v-show="!props.isReadonly">
      <el-row>
      <el-col :span="12">
      <el-form-item label="单据编号" prop="receiptCode" label-width="80px">
      <el-input v-model="formData.receiptCode" placeholder="请输入单据编号" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="物料id" prop="materialId" label-width="80px">
      <el-input v-model="formData.materialId" placeholder="请输入物料id" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="物料编号" prop="materialCode" label-width="80px">
      <el-input v-model="formData.materialCode" placeholder="请输入物料编号" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="物料名称" prop="materialName" label-width="80px">
      <el-input v-model="formData.materialName" placeholder="请输入物料名称" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="单据状态" prop="receiptStatus" label-width="80px">
      <el-input v-model="formData.receiptStatus" placeholder="请输入单据状态" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="入库批号" prop="batchNumber" label-width="80px">
      <el-input v-model="formData.batchNumber" placeholder="请输入入库批号" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="存储地点id" prop="storageLocationId" label-width="80px">
      <el-input v-model="formData.storageLocationId" placeholder="请输入存储地点id" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="存储地点编号" prop="storageLocationCode" label-width="80px">
      <el-input v-model="formData.storageLocationCode" placeholder="请输入存储地点编号" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="存储地点名称" prop="storageLocationName" label-width="80px">
      <el-input v-model="formData.storageLocationName" placeholder="请输入存储地点名称" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="入库日期" prop="businessDate" label-width="80px">
      <el-input v-model="formData.businessDate" placeholder="请输入入库日期" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="单据创建人" prop="receiptUserName" label-width="80px">
      <el-input v-model="formData.receiptUserName" placeholder="请输入单据创建人" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="业务类型" prop="businessType" label-width="80px">
      <el-input v-model="formData.businessType" placeholder="请输入业务类型" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="实到数量" prop="actualQuantity" label-width="80px">
      <el-input v-model="formData.actualQuantity" placeholder="请输入实到数量" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="供应商id" prop="supplierId" label-width="80px">
      <el-input v-model="formData.supplierId" placeholder="请输入供应商id" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="供应商编号" prop="supplierCode" label-width="80px">
      <el-input v-model="formData.supplierCode" placeholder="请输入供应商编号" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="供应商名称" prop="supplierName" label-width="80px">
      <el-input v-model="formData.supplierName" placeholder="请输入供应商名称" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="质检状态" prop="checkStatus" label-width="80px">
      <el-input v-model="formData.checkStatus" placeholder="请输入质检状态" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="删除标识" prop="deleted" label-width="80px">
      <el-input v-model="formData.deleted" placeholder="请输入删除标识" clearable/>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!props.isReadonly" type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import request from "@/utils/request";
  import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
  const dictionaryStore = useDictStoreHook();

  defineOptions({
    name: "MESMESINBOUNDADDORUPDATE",
    inheritAttrs: false,
  });

  const emit = defineEmits(["reset-table", "change-visible"]);

  const props = defineProps({
    visible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    title: {
      type: String,
      default: () => {
        return "";
      },
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isReadonly: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  });

  const visibleDialog = ref(false);
  watch(
      () => props.visible,
      (newVal: boolean) => {
        visibleDialog.value = newVal;
        setTimeout(() => {
          formRef.value.clearValidate();
        }, 50);
      }
  );

  const rules = reactive({
    receiptCode: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    materialId: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    materialCode: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    materialName: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    receiptStatus: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    batchNumber: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    storageLocationId: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    storageLocationCode: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    storageLocationName: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    businessDate: [
                        ],
    receiptUserName: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    businessType: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    actualQuantity: [
                        ],
    supplierId: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    supplierCode: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    supplierName: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    checkStatus: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    deleted: [
                        ],
  });

  const formRef = ref(ElForm);

  let formData = reactive({
 id: "",  receiptCode: "",  materialId: "",  materialCode: "",  materialName: "",  receiptStatus: "",  batchNumber: "",  storageLocationId: "",  storageLocationCode: "",  storageLocationName: "",  businessDate: "",  receiptUserName: "",  businessType: "",  actualQuantity: "",  supplierId: "",  supplierCode: "",  supplierName: "",  checkStatus: "",  version: "",  remarks: "",  createTime: "",  createdUserId: "",  createdUserName: "",  lastUpdateTime: "",  lastUpdatedUserId: "",  lastUpdatedUserName: "",  enabled: "",  deleted: "",   });

  watch(
          () => props.data,
          (newVal: any) => {
            formData.id = ""
            if (newVal?.id) {
              const {  id,  receiptCode,  materialId,  materialCode,  materialName,  receiptStatus,  batchNumber,  storageLocationId,  storageLocationCode,  storageLocationName,  businessDate,  receiptUserName,  businessType,  actualQuantity,  supplierId,  supplierCode,  supplierName,  checkStatus,  version,  remarks,  createTime,  createdUserId,  createdUserName,  lastUpdateTime,  lastUpdatedUserId,  lastUpdatedUserName,  enabled,  deleted,  } = newVal;
              Object.assign(formData, {  id,  receiptCode,  materialId,  materialCode,  materialName,  receiptStatus,  batchNumber,  storageLocationId,  storageLocationCode,  storageLocationName,  businessDate,  receiptUserName,  businessType,  actualQuantity,  supplierId,  supplierCode,  supplierName,  checkStatus,  version,  remarks,  createTime,  createdUserId,  createdUserName,  lastUpdateTime,  lastUpdatedUserId,  lastUpdatedUserName,  enabled,  deleted,  });
            }
          }
  );

  /** 关闭表单弹窗 */
  function closeDialog() {
    visibleDialog.value = false;
    emit("change-visible", false);
    resetForm();
  }

  /** 重置表单 */
  function resetForm() {
    formRef.value.resetFields();
    formRef.value.clearValidate();
    formData.id = ""
    formData.receiptCode = ""
    formData.materialId = ""
    formData.materialCode = ""
    formData.materialName = ""
    formData.receiptStatus = ""
    formData.batchNumber = ""
    formData.storageLocationId = ""
    formData.storageLocationCode = ""
    formData.storageLocationName = ""
    formData.businessDate = ""
    formData.receiptUserName = ""
    formData.businessType = ""
    formData.actualQuantity = ""
    formData.supplierId = ""
    formData.supplierCode = ""
    formData.supplierName = ""
    formData.checkStatus = ""
    formData.version = ""
    formData.remarks = ""
    formData.createTime = ""
    formData.createdUserId = ""
    formData.createdUserName = ""
    formData.lastUpdateTime = ""
    formData.lastUpdatedUserId = ""
    formData.lastUpdatedUserName = ""
    formData.enabled = ""
    formData.deleted = ""
  }

  const loading = ref(false);

  /** U9入库保存提交 */
  function handleSubmit() {
    formRef.value.validate(async (valid: any) => {
      if (valid) {
        loading.value = true;
        const text = formData.id ? "编辑" : "新增";
        await request({
          url: "/mes/mesinbound/save",
          method: "post",
          data: formData,
        }).finally(() => {
          loading.value = false;
        });
        ElMessage.success( text +`成功`);
        closeDialog();
        emit("reset-table", formData.id);
      }
    });
  }


  // 组件销毁时调用
  onBeforeUnmount(() => {
    visibleDialog.value = false;
    emit("change-visible", false);
  });


</script>
